<template>
  <!-- <div @click.self="closeMask" class="x-house" :style="{height:`${deviceH}px`}">
    <div  class="house-ctx page2 text-left" :style="{'background-image':`url(${modelBg})`}">
  <div class="ctx-title">{{roomName}}</div>-->

  <div class="x-content">
    <el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" v-dialogDrag class="jk-dialog" width="80%">
      <div style="width:786px;height:432px;margin:auto">
        <img :src="picurl |filterimgsrc" alt style="height:100%" />
      </div>
    </el-dialog>
    <div class="house-ctx page2 text-left" style="position:relative;padding-top:20px;cursor:pointer;">
      <div
        class="back"
        style="position:absolute;top:10px;right:10px;z-index:9999;"
        @click="comeback()"
      >
        <img
          src="../../assets/images/icon/return.png"
          style="cursor:pointer;width:30px;height:30px;"
        />
      </div>
      <!-- <p
        style="color: #69d3da;position: relative;z-index: 999;font-weight: bold;font-size: 20px;"
      >
        一人一档
      </p>-->
      <div class="content">
        <div class="left">
          <div style="display: flex;justify-content: center;margin-bottom:50px;">
            <div style="width:148px;cursor: pointer;" @click="picshow(pic)">
              <img :src="pic |filterimgsrc" id="img" :onerror="defaultImg" alt style="width:100%;" />
            </div>
          </div>
          <div>
            <ul style="margin-block-start: 0;padding-inline-start: 0;">
              <li @click="showTab(0)" :class="{ active: tabbarIndex == 0 }">基本信息</li>
              <li @click="showTab(1)" :class="{ active: tabbarIndex == 1 }">车辆信息</li>
              <li @click="showTab(2)" :class="{ active: tabbarIndex == 2 }">门禁信息</li>
            </ul>
          </div>
        </div>
        <div class="right" style="width:810px;">
          <div v-show="tabbarIndex == 0">
            <div style="display:flex;">
              <div class="span_left">姓名</div>
              <div class="span_right">{{ people.userName }}</div>
              <div class="span_left">身份证号</div>
              <div class="span_right">{{ new String().hideidCard(people.idNum) }}</div>
            </div>
            <div style="display:flex;">
              <div class="span_left">性别</div>
              <div class="span_right">{{ people.sex }}</div>
              <div class="span_left">出生年月</div>
              <div
                class="span_right"
              >{{ new String().getbirthday(people.idNum)}}</div>
            </div>
            <div style="display:flex;">
              <div class="span_left">民族</div>
              <div class="span_right">{{people.mz }}</div>
              <div class="span_left">文化程度</div>
              <div class="span_right">{{ people.education }}</div>
            </div>
            <div style="display:flex;">
              <div class="span_left">楼栋号</div>
              <div class="span_right">{{ people.unitName }}</div>
              <div class="span_left">电话号码</div>
              <div class="span_right">{{ people.phone }}</div>
            </div>
            <div style="display:flex;">
              <div class="span_left">门牌号</div>
              <div class="span_right">{{ people.roomName }}</div>
              <div class="span_left">居住类型</div>
              <div class="span_right">{{people.roomOwner }}</div>
            </div>
            <div style="display:flex;">
              <div class="span_left">房主联系电话</div>
              <div class="span_right">{{ people.roomOwnerPhone}}</div>
              <div class="span_left">房主身份证号</div>
              <div class="span_right">{{ new String().hideidCard(people.roomOwnerNum) }}</div>
            </div>
          </div>
          <div v-show="tabbarIndex == 1">
            <!-- 车 -->
            <div
              class="right_info"
              style="width: 810px;height: 600px;overflow: hidden;position: relative;"
            >
              <div
                id="vue_det"
                style="position: absolute;left: 0;overflow-y: scroll;overflow-x: hidden;"
              >
                <div style="height: 520px;display:flex;">
                  <div class="content_left" style="width:404px;">
                    <div class="content_info">{{people.userName}}-车辆轨迹</div>
                    <div
                      style="position: relative;border-right:2px solid  #246970;"
                      v-for="item,index in personInfo[1].itmes"
                      v-if="index%2==1"
                    >
                      <div
                        style="position: absolute;width:20px;height:20px;top: 50%;right:0;transform: translate(10px, -10px);"
                      >
                        <img src="@/assets/images/timepoint.png" />
                      </div>
                      <div :style="{'background-image':`url(${leftimg})`}" class="leftcontent">
                        <!-- content -->
                        <div class="itemcontent">
                          <div style="width:180px;margin:10px 20px;">
                            <div>{{new Date().dateFtt(item.startTime)}}</div>
                            <div>{{item.license}}</div>
                            <div>{{item.name}}</div>
                            <div>{{new String().hideidCard(item.idNum)}}</div>
                          </div>
                          <div style="cursor: pointer;height:90px;width:80px;">
                            <img
                              :src="item.pic |filterimgsrc"
                              alt
                              style="width:100%;height:100%;"
                              @click="picshow(item.pic)"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="content_right" style="width:405px;margin-left: -3px;">
                    <div
                      style="position: relative;border-left:2px solid  #246970;"
                      v-for="item,index in personInfo[1].itmes"
                      v-if="index%2==0"
                    >
                      <div
                        style="position: absolute;width:20px;height:20px;top: 50%;top: 50%;transform: translate(-10px, -10px);"
                      >
                        <img src="@/assets/images/timepoint.png" />
                      </div>
                      <div :style="{'background-image':`url(${rightimg})`}" class="rightcontent">
                        <div class="itemcontent">
                          <div style="width:180px;margin:10px 20px;">
                            <div>{{new Date().dateFtt(item.startTime)}}</div>
                            <div>{{item.license}}</div>
                            <div>{{item.name}}</div>
                            <div>{{new String().hideidCard(item.idNum)}}</div>
                          </div>
                          <div style="cursor: pointer;height:90px;width:80px;">
                            <img
                              :src="item.pic |filterimgsrc"
                              alt
                              style="width:100%;height:100%;"
                              @click="picshow(item.pic)"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 车 -->
          </div>
          <div v-show="tabbarIndex == 2">
            <!-- 人 -->
            <div
              class="right_info"
              style="width: 810px;height: 600px;overflow: hidden;position: relative;"
            >
              <div
                id="vue_det"
                style="position: absolute;left: 0;overflow-y: scroll;overflow-x: hidden;"
              >
                <div style="height: 520px;display:flex;">
                  <div class="content_left" style="width:404px;">
                    <div class="content_info">{{people.userName}}-门禁轨迹</div>
                    <div
                      style="position: relative;border-right:2px solid  #246970;"
                      v-for="item,index in personInfo[2].itmes"
                      v-if="index%2==1"
                    >
                      <div
                        style="position: absolute;width:20px;height:20px;top: 50%;right:0;transform: translate(10px, -10px);"
                      >
                        <img src="@/assets/images/timepoint.png" />
                      </div>
                      <div :style="{'background-image':`url(${leftimg})`}" class="leftcontent">
                        <!-- content -->
                        <div class="itemcontent">
                          <div style="width:180px;margin:10px 20px;">
                            <div>{{new Date().dateFtt(item.time)}}</div>
                            <div>{{item.buildingName}}</div>
                            <div>{{item.gateType}}</div>
                            <div>{{item.gateName}}</div>
                          </div>
                          <div style="cursor: pointer;height:90px;width:60px;margin-left:20px">
                            <img
                              :src="item.pic |filterimgsrc"
                              alt
                              style="width:100%;height:100%;"
                              @click="picshow(item.pic)"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="content_right" style="width:405px;margin-left: -3px;">
                    <div
                      style="position: relative;border-left:2px solid  #246970;"
                      v-for="item,index in personInfo[2].itmes"
                      v-if="index%2==0"
                    >
                      <div
                        style="position: absolute;width:20px;height:20px;top: 50%;top: 50%;transform: translate(-10px, -10px);"
                      >
                        <img src="@/assets/images/timepoint.png" />
                      </div>
                      <div :style="{'background-image':`url(${rightimg})`}" class="rightcontent">
                        <div class="itemcontent">
                          <div style="width:180px;margin:5px 20px;">
                            <div>{{new Date().dateFtt(item.time)}}</div>
                            <div>{{new String().hideidCard(item.idNum)}}</div>
                            <div>{{item.buildingName}}</div>
                            <div>{{item.gateType}}</div>
                          </div>
                          <div style="cursor: pointer;height:90px;width:60px;margin-left:20px">
                            <img
                              :src="item.pic |filterimgsrc"
                              alt
                              style="width:100%;height:100%;"
                              @click="picshow(item.pic)"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 门 -->
          </div>
        </div>
      </div>

      <!-- <ul class="tabbar">
        <li @click="showTab(0)" :class="{ active: tabbarIndex === 0 }">
          基本信息
        </li>
        <li @click="showTab(1)" :class="{ active: tabbarIndex === 1 }">
          车辆信息
        </li>
        <li @click="showTab(2)" :class="{ active: tabbarIndex === 2 }">
          门禁信息
        </li>

        <div class="tabbarContent" v-show="tabbarIndex === 0">
          <ul>
            <li>
              <span>姓名</span>
              <span>{{ people.userName }}</span>
            </li>
            <li>
              <span>性别</span>
              <span>{{ people.sex }}</span>
            </li>
            <li>
              <span>年龄</span>
              <span>{{ people.age }}</span>
            </li>
            <li>
              <span>出生日期</span>
              <span>{{
                people.birthdate == null ? "" : people.birthdate.split(" ")[0]
              }}</span>
            </li>
            <li>
              <span>门牌号</span>
              <span>{{ roomName }}</span>
            </li>
            <li>
              <span>身份证号</span>
              <span>{{ people.idNum }}</span>
            </li>
            <li>
              <span>电话号码</span>
              <span>{{ people.phone }}</span>
            </li>
            <li>
              <span>房主</span>
              <span>{{ people.roomOwnerName }}</span>
            </li>
            <li>
              <span>房主联系电话</span>
              <span>{{ people.roomOwnerPhone }}</span>
            </li>
          </ul>
        </div>
        <div v-show="tabbarIndex === 1">
          <ul class="list-ul">
            <li class="list-li">
              <div class="li-name">车牌</div>
              <div class="li-sex">时间</div>
              <div class="li-age">类型</div>
              <div class="li-phone">车位编号</div>
              <div class="li-phone">联系电话</div>
            </li>
            <li
              v-if="personInfo[1].itmes.length >= 0"
              v-for="(item, index) in personInfo[1].itmes"
              class="list-li car-li"
            >
              <div class="li-name">{{ item.carNum }}</div>
              <div class="li-sex">{{ item.paymentTime | filterTime }}</div>
              <div class="li-age">{{ item.parkingSpaceType }}</div>
              <div
                :alt="item.idNum"
                :title="item.parkingSpaceNum"
                class="li-phone"
              >
                {{ item.parkingSpaceNum }}
              </div>
              <div :alt="item.phone" :title="item.phone" class="li-phone">
                {{ item.phone }}
              </div>
              <div v-for="(item1, index1) in item.itmes" class="carDetail">
                <div>车牌号：{{ item1.license }}</div>
                <div>经过时间：{{ item1.startTime | filterTime }}</div>
                <div>摄像头ID：{{ item1.camerId }}</div>
                <div>
                  <img
                    class="pic"
                    :src="'data:image/jpg;base64,' + item1.pic"
                  />
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div v-show="tabbarIndex === 2">
          <ul class="list-ul">
            <li class="list-li">
              <div class="li-name">地点</div>
              <div class="li-name">监控地址</div>
              <div class="li-sex">时间</div>
              <div class="li-age">类型</div>

            </li>
            <li
              v-if="personInfo[2].itmes.length >= 0"
              v-for="(item, index) in personInfo[2].itmes"
              class="list-li car-li"
            >
              <div class="li-name">{{ item.roomName }}</div>
              <div class="li-age">{{ item.buildingName }}</div>
              <div class="li-sex">{{ item.time | filterTime }}</div>
              <div class="li-age">{{ item.gateType }}</div>
            </li>
          </ul>
        </div>
      </ul>-->
    </div>

  </div>
</template>

<script>
import { getPersonInfo,getPhotouUrl } from "@/api/peopleApi";
// import XDangan from "@/components/xdanganmodel";
export default {
  data() {
    return {
      dialogVisible: false,
      picurl:"",
      people: {},
      personInfo: {},
      tabbarIndex: 0,
      leftimg: require("@/assets/images/tankuangleft.png"),
      rightimg: require("@/assets/images/tanchuangicon.png"),
      dialogVisible: false,
      picurl: "",
      danganid: "",
      pic:"",
      defaultImg:'this.src="'+require('@/assets/images/touxiangicon.png')+'"'
    };
  },
  props: {
    id: {
      type: [String, Number]
    }
  },
  beforeMount() {
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    this.deviceH = h;

    // this.pic=require('@/assets/images/touxiangicon.png')
  },
  mounted() {
    this.showPeopleDetail();
  },
  methods: {
    picshow(url) {
      this.dialogVisible = !this.dialogVisible;
      this.picurl = url;
    },

    async showPeopleDetail(index, item) {
      // console.log(index, item);
      console.log(this.id)
      let data = {
        idNum: this.id
      };
      const res = await getPersonInfo(data);
      this.personInfo = res;
      this.people = res[0].itmes == null ? [] : res[0].itmes;
      this.pic=res[0].itmes == null ? this.defaultImg : getPhotouUrl()+res[0].itmes.idNum
      console.log(this.pic)

    },
    showTab(index) {
      this.tabbarIndex = index;
      // alert(index)
      // alert(index)
      // document.querySelector(".active").className = "";
      // document.querySelectorAll(".tabbar li")[index].className = "acitve";
    },
    comeback() {
      this.$emit("changedangan");
    }
  }
};
</script>
<style lang="less" scoped>
.content {
  margin-top: 50px;
  height: 708px;
  display: flex;
  .left {
    width: 248px;
    padding-left: 48px;
    padding-right: 44px;
    font-family: PingFangSC-Regular;
    font-size: 12px !important;
    color: #ffffff;
    text-align: center;
    li {
      list-style: none;
      height: 40px;
      line-height: 40px;
    }
  }
  .leftcontent {
    width: 366px;
    height: 104px;
    margin-left: 25px;

    margin-top: 103px;
  }
  .rightcontent {
    width: 366px;
    height: 104px;
    margin-left: 10px;
    margin-bottom: 103px;
    .itemcontent {
      margin-left: 20px;
    }
  }
  .right_info {
    width: 810px;
    height: 600px;
    overflow: hidden;
    position: relative;
  }
  #vue_det::-webkit-scrollbar {
    display: none;
  }
  .itemcontent {
    display: flex;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #ffffff;
    line-height: 28px;
    div {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .span_left {
    background: rgba(27, 58, 61, 0.75);
    border: 1px solid #246970;
    padding-right: 15px;
    text-align: right;
    color: #ffffff;
    width: 150px;
    height: 50px;
    line-height: 50px;
  }
  .content_info {
    height: 100px;
    margin-bottom: -100px;
    font-family: PingFangSC-Medium;
    font-size: 24px;
    color: #e9e9e9;
    letter-spacing: 0;
    padding-left: 20px;
  }
  .span_right {
    padding-left: 20px;
    text-align: left;
    color: #ffffff;
    border: 1px solid #246970;
    width: 250px;
    height: 50px;
    line-height: 50px;
  }
  .active {
    background: rgba(114, 237, 245, 0.6);
    border-radius: 22px;
    border-radius: 22px;
  }
}
.x-content {
  width: 100%;
  // position: fixed;
  // top: 0;
  // left: 0;
  // background: rgba(0, 0, 0, 0.8);
  //z-index: 1000;

  .text-left.page2 {
    text-align: left;
  }

  .page2 {
    .unit-list {
      .list-li:nth-child(even) {
        background-color: #06121d;
      }
    }

    /*.back {
      position: absolute;
      right: 60px;
      top: 30px;

      img {
        width: 30px;
        height: 30px;
      }
    }*/

    .tabbar {
      padding: 0;
      margin: 0;
      list-style: none;
      text-align: left;
      text-align: left;
      margin-top: 20px;

      .tabbarContent {
        & > li,
        & > ul {
          padding: 0;
          margin: 0;
          list-style: none;
          color: #fff;
        }

        li {
          width: 33%;
          display: inline-block;
          padding-top: 10px;
          padding-bottom: 10px;

          span {
            width: 40%;
            display: inline-block;
          }
        }
      }

      & > li {
        display: inline-block;
        padding: 5px;
        border-radius: 4px;
        background: #0f0f2b;
        font-size: 16px;
        color: #fff;
      }

      .list-li:nth-child(even) {
        background-color: #06121d;
      }
    }

    .tabbar .active {
      background: #3f8aff;
      color: #fff;
    }

    .name {
      width: 100%;
      text-align: left;
      font-family: PingFangSC-Medium;
      font-size: 18px;
      color: #69d3da;
      letter-spacing: 0;
      overflow: hidden;
      white-space: nowrap;
      word-break: normal;
      text-overflow: ellipsis;
      margin-top: 20px;

      & > span {
        line-height: 2;
      }
    }

    .choose {
      float: right;
      padding: 0;
      margin: 0;
      position: relative;
      top: 0;
    }

    .choose ul,
    .choose li {
      list-style: none;
      display: inline-block;
    }

    .choose li {
      padding: 8px;
      border-radius: 4px;
      background: #0f0f2b;
      cursor: pointer;
    }

    .choose .active {
      background: #3f8aff;
      color: #fff;
    }

    .car-li {
      flex-wrap: wrap;

      .carDetail {
        display: flex;
        align-items: center;
        flex-grow: 1;
        width: 100% !important;

        & > div {
          width: 20%;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      & > div {
        width: 20% !important;
      }
    }

    .list-li {
      cursor: pointer;
      width: 100%;
      height: 36px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #ffffff;
      line-height: 36px;

      & > div {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        line-height: 22px;
        width: 100%;
      }

      & > .button-color {
        color: #3f8aff;
      }
    }
  }

  .house-ctx::-webkit-scrollbar {
    width: 0px;
    height: 16px;
    background-color: #ccc;
  }

  .house-ctx {
    // position: absolute;
    // top: 50%;
    // transform: translateY(-50%);
    // left: 0;
    // right: 0;
    margin: 0 auto;
    // width: 1177px;
    // height: 800px;
    overflow-y: auto;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 10px 30px;
    box-sizing: border-box;

    .ctx-title {
      width: 100%;
      padding-top: 10px;
      box-sizing: border-box;
      font-family: PingFangSC-Medium;
      font-size: 24px;
      color: #e9e9e9;
      letter-spacing: 4.8px;
      text-align: center;
      box-sizing: border-box;
    }

    .ctx-info {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 28px;

      .info-item {
        flex: 1;
        height: 180px;

        .item-rs {
          width: 100%;
          height: 50%;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .rs-content {
            width: 50%;
            height: 100%;

            .content-name {
              width: 100%;
              font-family: PingFangSC-Medium;
              font-size: 18px;
              color: #69d3da;
              letter-spacing: 0;
              text-align: left;

              .iconfont {
                font-size: 22px;
                margin-right: 8px;
              }
            }

            .content-number {
              font-family: Silom;
              font-size: 40px;
              margin-top: 18px;
              text-align: left;
              color: #d0b01c;
              letter-spacing: 2.22px;
              line-height: 40px;

              .unit {
                font-family: PingFangSC-Medium;
                font-size: 18px;
                color: #69d3da;
                letter-spacing: 0;
              }
            }
          }
        }

        .item-name {
          width: 100%;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #69d3da;
          letter-spacing: 0;
          text-align: left;

          .iconfont {
            font-size: 22px;
            margin-right: 8px;
          }
        }

        .item-number {
          margin-top: 20px;
          font-family: Silom;
          font-size: 40px;
          color: #d0b01c;
          letter-spacing: 2.22px;
          text-align: left;
        }

        .item-pie {
          width: 100%;
          height: 140px;
          margin-top: 10px;
          padding: 5px 0px;
          box-sizing: border-box;

          .pie-canvas {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .ctx-footer {
      width: 100%;
      margin-top: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .footer-floor::-webkit-scrollbar {
        width: 0px;
        height: 16px;
        background-color: #ccc;
      }

      .footer-floor {
        flex: 1;
        height: 445px;
        overflow-y: auto;

        .floor-name {
          width: 100%;
          text-align: left;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #69d3da;
          letter-spacing: 0;
          overflow: hidden;
          white-space: nowrap;
          word-break: normal;
          text-overflow: ellipsis;
        }

        .floor-list {
          width: 100%;
          height: clac(100% - 25px);
          overflow-y: auto;
          margin-top: 20px;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .list-name {
            width: 55px;
            text-align: left;
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #e9e9e9;
            min-width: 55px;
          }

          .kongzhi {
            background-color: #474747;
          }

          .qunzu {
            background-color: #ca504b;
          }

          .zizhu {
            background-color: #336298;
          }

          .chuzu {
            background-color: #c1812d;
          }

          .list-rs {
            //width: calc(100% - 55px);
            cursor: pointer;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            margin: 10px;
            margin-top: 0;
            margin-bottom: 0;

            .rs-item {
              width: 60px;
              height: 25px;
              text-align: center;
              line-height: 25px;
              font-family: PingFangSC-Regular;
              font-size: 16px;
              color: #e9e9e9;
              text-align: center;
              cursor: pointer;

              &.item-empty {
                background: #474747;
              }

              &.item-self {
                background: #21629c;
              }

              &.item-rent {
                background: #cc7f01;
              }

              &.item-other {
                background: #da4545;
              }
            }
          }
        }
      }

      .footer-unit::-webkit-scrollbar {
        width: 0px;
        height: 16px;
        background-color: #ccc;
      }

      .footer-unit {
        flex: 1;
        height: 450px;
        overflow-y: auto;

        .unit-header {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: center;

          .header-btn {
            width: 60px;
            height: 32px;
            background: #102c45;
            margin-right: 3px;
            line-height: 32px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #ffffff;
            letter-spacing: 0;
            text-align: center;

            &:first-child {
              border-top-left-radius: 4px;
              border-bottom-left-radius: 4px;
            }

            &:last-child {
              border-top-right-radius: 4px;
              border-bottom-right-radius: 4px;
              margin-right: 0;
            }

            &.active {
              background: #209cff;
            }
          }
        }

        .unit-list {
          width: 100%;
          height: clac(100% - 25px);

          margin-top: 30px;

          .list-title {
            font-family: PingFangSC-Semibold;
            font-size: 16px;
            color: #ffffff;
            text-align: center;
            line-height: 22px;
          }

          .list-ul {
            width: 90%;
            height: clac(100% - 25px);
            margin-top: 15px;
            overflow-y: auto;
            list-style: none;

            .list-li:nth-child(even) {
              background-color: #06121d;
            }

            .list-li {
              cursor: pointer;
              width: 100%;
              height: 36px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #ffffff;
              line-height: 36px;

              .item-no {
                width: 30%;

                box-sizing: border-box;
              }

              .li-name {
                width: 50%;

                box-sizing: border-box;
              }

              .li-sex {
                width: 40%;

                box-sizing: border-box;
              }

              .li-age {
                width: 40%;

                box-sizing: border-box;
              }

              .li-phone {
                box-sizing: border-box;
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }
  }
}
</style>
